<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>water fall</title>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/ext/resources/css/ext-all.css" />
<link type="text/css" rel="stylesheet" href="<%=request.getContextPath()%>/css/waterfall.css" ></link>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/main.css" />
<script type="text/javascript" src="<%=request.getContextPath()%>/ext/js/bootstrap.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/waterfall.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/Viewer.js"></script>
<style type="text/css">

</style>

<script type="text/javascript">
	Ext.onReady(function(){
		waterfall.opt.basePath = '<%=request.getContextPath()%>';
		
		var back = Ext.create('com.fansy.Viewer', {
			opt: {imageCls:'back',
				basePath: '<%=request.getContextPath()%>',
				action: '/main/index.do',
				width:50,
				height:50
			},
			renderTo: Ext.get('head')
		});
		
		waterfall.fetchImag();		
		//setInterval("waterfall.doLayout('main','box')", 1);
		window.onscroll = function() {
			if(waterfall.shouldScroll('main','box')) {
				waterfall.fetchImag();
				//waterfall.doLayout('main','box');
			}
		}
		
	});
	
</script>
</head>
<body>
<div id="head"></div>
	<div id="main">
		<!--
		<div class="box">
			<div class="pic">
				<img src="images/0.jpg"></img>
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="images/1.jpg"></img>
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="images/2.jpg"></img>
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="images/3.jpg"></img>
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="images/4.jpg"></img>
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="images/5.jpg"></img>
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="images/6.jpg"></img>
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="images/7.jpg"></img>
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="images/8.jpg"></img>
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="images/9.jpg"></img>
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="images/10.jpg"></img>
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="images/11.jpg"></img>
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="images/12.jpg"></img>
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="images/13.jpg"></img>
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="images/14.jpg"></img>
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="images/15.jpg"></img>
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="images/16.jpg"></img>
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="images/17.jpg"></img>
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="images/18.jpg"></img>
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="images/19.jpg"></img>
			</div>
		</div>
		-->

	</div>
</body>
</html>